<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<link rel="stylesheet" href="gadgets.css" type="text/css" />

<title>Data Formats</title>
</head>

<body>


<h1 class="title">Liquid Diagrams</h1>

<p class="title">
&copy;2012 Dieter Ladenhauf<br/>
</p>


<h2 class="title">Data Formats</h2>
<p>Each visualisation in Liquid Diagrams requires its data to be specified according to certain criteria 
in order to display it properly. See the following table for an overview of which data format is used by 
which visualisation.</p>

<br/>

<p align="center"><b>The data formats used by the visualisations of Liquid Diagrams:</b></p>
<table width="895" border="1">
  <tr>
    <td width="205">Visualisation</td>
    <td width="115">Chart Data Format</td>
    <td width="115">Pie Data Format</td>
    <td width="115">Nightingale Data Format</td>
    <td width="115">Multidimensional Data Format</td>
    <td width="115">Hieararchical Data Format</td>
    <td width="115">Geo Data Format</td>
  </tr>
  <tr>
    <td>Line Chart</td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Bar Chart</td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Area Chart</td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Pie Chart</td>
    <td></td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Polar Area Chart</td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Bat's Wing Diagram</td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Parallel Coordinates</td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Star Plot</td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Similarity Map</td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Treemap</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
  </tr>
  <tr>
    <td>Voronoi Treemap</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
    <td></td>
  </tr>
  <tr>
    <td>Heatmap</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>X</td>
  </tr>
</table>
<br /><br />


<h2 class="title" id="chart">LD Chart Data Format</h2>
<p>This data format is used in the visualisations line chart, bar chart, and area chart. Here, the first 
row specifies the values shown on the x-axis. The first column contains the name of each data entity.
</p>

<br/>

<p align="center"><b>Example:</b></p>
<table width="505" border="1">
  <tr>
    <td width="160">Year</td>
    <td width="115">2007</td>
    <td width="115">2008</td>
    <td width="115">2009</td>
  </tr>
  <tr>
    <td>Product A</td>
    <td>4980</td>
    <td>2660</td>
    <td>1170</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>3200</td>
    <td>3600</td>
    <td>6000</td>
  </tr>
  <tr>
    <td>Product C</td>
    <td>2600</td>
    <td>2150</td>
    <td>1010</td>
  </tr>
</table>
<br /><br />


<h2 class="title" id="pie">LD Pie Data Format</h2>
<p>The pie chart visualisation uses the pie data format. Here, the name of the data entities are specified using 
the first column and the rest of the columns, starting with the second column contain data values visualised 
within the visualisation. The first row contains the names of the dimensions.
</p>

<br/>

<p align="center"><b>Example:</b></p>
<table width="335" border="1">
  <tr>
    <td width="171">Names</td>
    <td width="148">2008</td>
  </tr>
  <tr>
    <td>Product A</td>
    <td>49800</td>
  </tr>
  <tr>
    <td>Product B</td>
    <td>26600</td>
  </tr>
  <tr>
    <td>Product C</td>
    <td>117000</td>
  </tr>
</table>
<br /><br />


<h2 class="title" id="nightingale">LD Nightingale Data Format</h2>
<p>The data format used by the bat's wing diagram and the polar area diagram is similar to the pie data format. The data
entities are specified using the first row and the date values are contained in the forst column. 
</p>

<br/>

<p align="center"><b>Example:</b></p>
<table width="290" border="1">
  <tr>
    <td width="200">Period</td>
    <td width="30">Other Causes</td>
    <td width="30">Wounds</td>
    <td width="30">Disease</td>
  </tr>
  <tr>
    <td>1854-04-01</td>
    <td>30</td>
    <td>0</td>
    <td>30</td>
  </tr>
  <tr>
    <td>1854-05-01</td>
    <td>20</td>
    <td>0</td>
    <td>30</td>
  </tr>
  <tr>
    <td>1854-06-01</td>
    <td>10</td>
    <td>0</td>
    <td>20</td>
  </tr>
  <tr>
    <td>1854-07-01</td>
    <td>20</td>
    <td>0</td>
    <td>100</td>
  </tr>
  <tr>
    <td>1854-08-01</td>
    <td>30</td>
    <td>0</td>
    <td>350</td>
  </tr>
  <tr>
    <td>1854-09-01</td>
    <td>60</td>
    <td>30</td>
    <td>330</td>
  </tr>
  <tr>
    <td>1854-10-01</td>
    <td>100</td>
    <td>95</td>
    <td>300</td>
  </tr>
  <tr>
    <td>1854-11-01</td>
    <td>90</td>
    <td>180</td>
    <td>350</td>
  </tr>
  <tr>
    <td>1854-12-01</td>
    <td>100</td>
    <td>90</td>
    <td>500</td>
  </tr>
  <tr>
    <td>1855-01-01</td>
    <td>200</td>
    <td>80</td>
    <td>800</td>
  </tr>
  <tr>
    <td>1855-02-01</td>
    <td>220</td>
    <td>60</td>
    <td>550</td>
  </tr>
  <tr>
    <td>1855-03-01</td>
    <td>120</td>
    <td>40</td>
    <td>300</td>
  </tr>

</table>
<br /><br />


<h2 class="title" id="multidimensional">LD Multidimensional Data Format</h2>
<p>The visualisations star plot, parallel coordinates, and similarity map use the multidimensional data format. The first 
column contains the names of the data entities. The names of the data dimensions are specified in the first row. In the 
star plot and parallel coordinates visualisations, the data dimensions are represented using axes. The values for attributes 
can be specified using numbers or strings.
</p>

<br/>

<p align="center"><b>Example:</b></p>
<table width="917" border="1">
  <tr>
    <td width="178">Car</td>
    <td width="108">Price (Euro)</td>
    <td width="215">Cylinder Capacity (ccm)</td>
    <td width="109">Power (PS)</td>
    <td width="273">Acceleration (0 to 100 in sec)</td>
  </tr>
  <tr>
    <td>Porsche Boxter S</td>
    <td>49800</td>
    <td>3200</td>
    <td>260</td>
    <td>5.7</td>
  </tr>
  <tr>
    <td>SMART Readster</td>
    <td>26600</td>
    <td>3600</td>
    <td>101</td>
    <td>9.8</td>
  </tr>
  <tr>
    <td>Audi A8</td>
    <td>117000</td>
    <td>6000</td>
    <td>450</td>
    <td>5.2</td>
  </tr>
</table>
<br /><br />


<h2 class="title" id="hierarchical">LD Hierarchical Data Format</h2>
<p>The hierarchical data format is required by the visualisations treemap and Voronoi treemap. This data 
format specifies a data entity in each row. The first row contains the names of the data dimensions. The first column 
contains the names of the data entities. The second column specifies the name of the parent for each data entity. 
If a field in the second column is left blank, the gadget assumes that this entity is a top-level entity and 
therefore it is added to the root of the hierarchy. All further columns, starting with the third column are value 
columns, displayable within the visualisation.
</p>

<br/>


<p align="center"><b>Example:</b></p>
<table width="505" border="1">
  <tr>
    <td width="200">Name</td>
    <td width="115">Parent</td>
    <td width="115">Area</td>
    <td width="115">Population</td>
  </tr>
  <tr>
    <td>Styria</td>
    <td>Austria</td>
    <td>16392</td>
    <td>1204986</td>
  </tr>
  <tr>
    <td>Carinthia</td>
    <td>Austria</td>
    <td>9536</td>
    <td>560753</td>
  </tr>
  <tr>
    <td>Upper Austria</td>
    <td>Austria</td>
    <td>11980</td>
    <td>1405986</td>
  </tr>
</table>
<br /><br />


<h2 class="title" id="geo">LD Geo Data Format</h2>


<p>With this data format, a geographic area can be specified in two ways. First, in the one-
column data format, the area is identified using the ISO-3166 ALPHA-2 code of the parent
area, followed by a dash ("-") and the ISO-3166 ALPHA-2 code of the child area.</p>

<p align="center"><b>One-Column - Example:</b></p>
<table width="430" border="1">
  <tr>
    <td width="200">Parent Code</td>
    <td width="115">Area</td>
    <td width="115">Population</td>
  </tr>
  <tr>
    <td>Austria</td>
    <td>5143600</td>
    <td>8214160</td>
  </tr>
  <tr>
    <td>DE-BR</td>
    <td>29479</td>
    <td>2535000</td>
  </tr>
  <tr>
    <td>CH-BE</td>
    <td>5969</td>
    <td>943400</td>
  </tr>
  <tr>
    <td>CH-LU</td>
    <td>1493</td>
    <td>345400</td>
  </tr>
</table>
<br /><br />


<p>The second data format is the two-column data format. Here,
the areas are identified by the first column, specifying the ISO-3166 ALPHA-2 code of the parent, 
together with the second column, specifying the ISO-3166 ALPHA-2 code of the child. In order to be
recognised as the two-column input format, the value in the first row of the second column must be
named "ld-Child". Otherwise, the gadget assumes that the one-column input format is being used.</p>


<p align="center"><b>Two-Column - Example:</b></p>
<table width="505" border="1">
  <tr>
    <td width="200">Parent Code</td>
    <td width="115">ld-Child</td>
    <td width="115">Area</td>
    <td width="115">Population</td>
  </tr>
  <tr>
    <td>DE</td>
    <td>BE</td>
    <td>892</td>
    <td>3416000</td>
  </tr>
  <tr>
    <td>DE</td>
    <td>BR</td>
    <td>29479</td>
    <td>2535000</td>
  </tr>
  <tr>
    <td>CH</td>
    <td>BE</td>
    <td>5969</td>
    <td>943400</td>
  </tr>
  <tr>
    <td>CH</td>
    <td>LU</td>
    <td>1493</td>
    <td>345400</td>
  </tr>
</table>
<br /><br />


<p>To change the displayed name of regions there is the possibility to insert a column containing the desired
names. This makes sense if the user wants to display the name of a region in a specific language. In order to 
achieve this the label of the column has to be "ld-Name".</p>

<p align="center"><b>Name Column - Example:</b></p>
<table width="505" border="1">
  <tr>
    <td width="200">Parent Code</td>
    <td width="115">ld-Name</td>
    <td width="115">Area</td>
    <td width="115">Population</td>
  </tr>
  <tr>
    <td>DE-BE</td>
    <td>Berlin</td>
    <td>892</td>
    <td>3416000</td>
  </tr>
  <tr>
    <td>DE-BR</td>
    <td>Brandenburg</td>
    <td>29479</td>
    <td>2535000</td>
  </tr>
  <tr>
    <td>CH-BE</td>
    <td>Bern</td>
    <td>5969</td>
    <td>943400</td>
  </tr>
  <tr>
    <td>CH-LU</td>
    <td>Luzern</td>
    <td>1493</td>
    <td>345400</td>
  </tr>
</table>
<br />

</body>
</html>
